import { List } from "antd";
import { useEffect, useRef } from "react";

const data = [
  "千山鸟飞绝万径人踪灭孤舟蓑笠翁独钓寒江雪江雪柳宗元千山鸟飞绝万径人踪灭孤舟蓑笠翁独钓寒江雪江雪柳宗元",
  "具体信息2具体信息2具体信息2具体信息2具体信息2",
  "具体信息3具体信息3具体信息3具体信息3具体信息3",
  "具体信息4具体信息4具体信息4具体信息4具体信息4",
  "具体信息5具体信息5具体信息5具体信息5具体信息5",
  "具体信息6具体信息6具体信息6具体信息6具体信息6",
  "具体信息7具体信息7具体信息7具体信息7具体信息7",
  "具体信息8具体信息8具体信息8具体信息8具体信息8",
  "具体信息9具体信息9具体信息9具体信息9具体信息9",
  "具体信息10具体信息10具体信息10具体信息10具体信息10",
];

const ScrollView = ({ auto = true, style, indexVisible, itemStyle }) => {
  const listRef = useRef(null);
  const scrollIntervalRef = useRef(null);
  const resumeTimeoutRef = useRef(null);

  useEffect(() => {
    if (!auto) return;

    const listElement = listRef.current;
    if (!listElement) return;

    let scrollPosition = 0;
    const scrollStep = 1; // 滚动速度
    const scrollDelay = 50; // 滚动间隔(ms)
    const resumeDelay = 2000; // 恢复自动滚动的延迟(ms)

    const autoScroll = () => {
      if (!listElement) return;

      scrollPosition += scrollStep;

      // 当滚动到底部时，重置到顶部
      if (
        scrollPosition >=
        listElement.scrollHeight - listElement.clientHeight
      ) {
        scrollPosition = 0;
      }

      listElement.scrollTop = scrollPosition;
    };

    const startAutoScroll = () => {
      // 仅在无现有间隔时启动
      if (!scrollIntervalRef.current) {
        scrollIntervalRef.current = setInterval(autoScroll, scrollDelay);
      }
    };

    const stopAutoScroll = () => {
      if (scrollIntervalRef.current) {
        clearInterval(scrollIntervalRef.current);
        scrollIntervalRef.current = null;
      }
    };

    const handleUserInteraction = () => {
      // 停止自动滚动
      stopAutoScroll();

      // 清除之前的恢复定时器
      if (resumeTimeoutRef.current) {
        clearTimeout(resumeTimeoutRef.current);
      }

      // 设置延迟后恢复自动滚动
      resumeTimeoutRef.current = setTimeout(() => {
        startAutoScroll();
      }, resumeDelay);
    };

    // 启动自动滚动
    startAutoScroll();

    // 添加事件监听器
    listElement.addEventListener("wheel", handleUserInteraction, {
      passive: true,
    });
    listElement.addEventListener("touchstart", handleUserInteraction, {
      passive: true,
    });
    listElement.addEventListener("touchend", handleUserInteraction, {
      passive: true,
    });

    // 清理函数
    return () => {
      stopAutoScroll();
      if (resumeTimeoutRef.current) {
        clearTimeout(resumeTimeoutRef.current);
      }
      if (listElement) {
        listElement.removeEventListener("wheel", handleUserInteraction);
        listElement.removeEventListener("touchstart", handleUserInteraction);
        listElement.removeEventListener("touchend", handleUserInteraction);
      }
    };
  }, [auto]); // 仅依赖 auto 属性

  // 定义交替背景色
  const getBackgroundColor = (index) => {
    return index % 2 === 0
      ? "rgba(30, 50, 80, 0.5)" // 偶数行 - 较亮的深蓝
      : "rgba(20, 40, 60, 0.5)"; // 奇数行 - 较暗的深蓝
  };

  return (
    <div>
      <div
        style={{
          color: "#eee",
          paddingLeft: 33,
          background: "url(list-title-bg.png) center center no-repeat",
          backgroundSize: "100% 100%",
          height: 27,
          lineHeight: "22px",
          marginBottom: 2,
          fontSize: '1.1vw'
        }}
        className="you-she-font"
      >
        模块名称
      </div>
      <List
        ref={listRef}
        dataSource={data}
        style={{ maxHeight: "59vh", overflow: "auto", ...style }}
        renderItem={(item, index) => (
          <List.Item
            style={{
              backgroundColor: getBackgroundColor(index),
              color: "#eee",
              padding: "12px 10px",
              width: "100%",
              boxSizing: "border-box",
              ...itemStyle,
            }}
            title={item}
            className="ellipsis"
          >
            {indexVisible && (
              <span style={{ marginRight: "10px" }}>{index + 1}</span>
            )}
            {item}
          </List.Item>
        )}
      />
    </div>
  );
};

export default ScrollView;